import {
  VuexModule,
  Module,
  Mutation,
  Action,
  getModule
} from 'vuex-module-decorators'
import store from '@/store'
import { Location } from 'vue-router'

interface BreadcrumbRoutedTitle {
  content: string;
  route: string | Location;
}

export interface BreadcrumbItem {
  icon: string; // Material Icon Font
  title: BreadcrumbRoutedTitle | BreadcrumbRoutedTitle[];
}

export interface LayoutState {
  breadcrumb: BreadcrumbItem[];
}

@Module({ dynamic: true, store, name: 'layout' })
class Layout extends VuexModule implements LayoutState {
  public breadcrumb: BreadcrumbItem[] = [];

  @Mutation
  private SET_BREADCRUMB (breadcrumbs: BreadcrumbItem[]) {
    this.breadcrumb = breadcrumbs
  }

  @Mutation
  private RESET_BREADCRUMB () {
    this.breadcrumb = []
  }

  @Action
  public SetBreadcrumb (breadcrumbs: BreadcrumbItem[]) {
    this.SET_BREADCRUMB(breadcrumbs)
  }

  @Action
  public ResetBreadcrumb () {
    this.RESET_BREADCRUMB()
  }
}

export const LayoutModule = getModule(Layout)
